<!DOCTYPE html>
<html lang="en">
<head>
    <title>导航栏</title>
    <script src="/guanglianstatic/base/baseCss.js"></script>
    <link rel="stylesheet" href="/guanglianstatic/css/iconfont.css"/>
    <style>
        #site-header {
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 900;
            transition: all .3s ease;
            background-color: #fff;
        }

        #gl-nav-wrap {
            width: 100%;
        }

        #gl-header {
            width: 1200px;
            margin: auto;
            height: 86px;
            display: flex;
        }

        #gl-header .gl-logo {
            width: 104px;
            height: 100%;
            border: 1px solid black;
        }

        #gl-header .gl-nav {
            flex: 1;
            position: relative;
            display: flex;
            justify-content: flex-end;
            padding-right: 220px;
        }

        .gl-dl {
            display: flex;
            border: 0px solid blue;
            position: relative;
        }

        .gl-dt {
            background-color: #fff;
        }

        .gl-dt a {
            padding: 32px 16px;
            display: inline-block;
            transition: all .3s;
            color: #3b3e40;
            vertical-align: middle;
            line-height: 22px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
        }

        .gl-dd {
            display: none;
            width: 850px;
            height: 64px;
            padding: 20px 10px;
            background-color: rgba(0, 53, 148, 0.6);
            position: absolute;
            left: 0;
            top: 100%;
        }

        .gl-column-wrap {
            width: 100%;
            height: 100%;
            display: flex;
        }


        .gl-no {
            width: 100%;
            height: 2px;
            position: absolute;
            left: 0;
            bottom: 1px;
            background-color: #003594;
            display: none;
        }

        .navbar-header a {
            display: inline-block;
            float: left;
            padding: 23px 0;
            height: auto;
        }

        .gl-dd .column-item {
            position: relative;
            display: flex;
        }

        .cell {
            box-sizing: border-box;
            flex-shrink: 0;
            padding: 0 10px;
        }

        .product-link {
            display: inline-block;
        }

        .column-item ul > li {
            float: left;
            padding-right: 20px;
        }

        .column-item ul li.nav-item a {
            color: rgba(255, 255, 255, 0.3);
            font-size: 14px;
            line-height: 24px;
            display: inline-block;
            word-break: break-word;
            cursor: pointer;
            /*font-weight: bold;*/
        }

        .column-item ul li.nav-item:first-child a {
            font-weight: bold;
        }

        .column-item ul li.nav-item:first-child a:after {
            content: '';
            position: relative;
            left: 10px;
            width: 1px;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
        }

        .column-item .ga-data:hover {
            color: #fff;
        }

        .column-item .title {
            color: rgba(255, 255, 255, 0.3);
            line-height: 24px;
            font-size: 14px;
            display: block;
            padding-right: 20px;
        }
    </style>
</head>
<body style="background-color: rebeccapurple;">

<div id="gl-nav-wrap">
    <div id="gl-header">
        <div class="navbar-header">
            <a href="http://120.24.58.54/">
                <img src="http://120.24.58.54/upload/img-iPlREr-139032.png">
            </a>
        </div>
        <div class="gl-nav">
            <div class="gl-dl">
                <div class="gl-dt">
                    <a target="_self" href="/home" >首页</a>
                </div>
                <div class="gl-no"></div>
            </div>
            <div class="gl-dl">
                <div class="gl-dt">
                    <a target="_self" href="/home" >关于广联</a>
                </div>
                <div class="gl-no"></div>
                <div class="gl-dd">
                    <div class="gl-column-wrap">
                        <div class="column-item cell">
                            <div class="product-link">
                                <ul>
                                    <li class="nav-item">
                                        <a data-ga-category="pc_nav" data-ga-action="click"
                                           data-ga-label="集团介绍"
                                           href="/introduction"
                                           target="_self" class="ga-data">
                                            集团介绍
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a data-ga-category="pc_nav" data-ga-action="click"
                                           data-ga-label="集团简介"
                                           href="/introduction"
                                           target="_self" class="ga-data">
                                            集团简介
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a data-ga-category="pc_nav" data-ga-action="click"
                                           data-ga-label="品牌文化"
                                           href="/brandCulture"
                                           target="_self" class="ga-data">
                                            品牌文化
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a data-ga-category="pc_nav" data-ga-action="click"
                                           data-ga-label="管理层信息"
                                           href="/manageInfo"
                                           target="_self" class="ga-data">
                                            管理层信息
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a data-ga-category="pc_nav" data-ga-action="click"
                                           data-ga-label="联系广联"
                                           href="/connect"
                                           target="_self" class="ga-data">
                                            联系广联
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="column-item cell">
                            <div class="product-link">
                                <ul>
                                    <li class="nav-item">
                                        <a data-ga-category="pc_nav" data-ga-action="click"
                                           data-ga-label="招贤纳士"
                                           href="/campusRecruiting?title=校招"
                                           target="_self" class="ga-data">
                                            招贤纳士
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a data-ga-category="pc_nav" data-ga-action="click"
                                           data-ga-label="校园招聘"
                                           href="/campusRecruiting?title=校招"
                                           target="_self" class="ga-data">
                                            校园招聘
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a data-ga-category="pc_nav" data-ga-action="click"
                                           data-ga-label="社会招聘"
                                           href="/campusRecruiting?title=社招"
                                           target="_self" class="ga-data">
                                            社会招聘
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a data-ga-category="pc_nav" data-ga-action="click"
                                           data-ga-label="招聘公告"
                                           href="/recruitmentAd"
                                           target="_self" class="ga-data">
                                            招聘公告
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a data-ga-category="pc_nav" data-ga-action="click"
                                           data-ga-label="成长发展"
                                           href="/growth"
                                           target="_self" class="ga-data">
                                            成长发展
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <div class="gl-dl">
                <div class="gl-dt">
                    <a target="_self" href="/home" >产品中心</a>
                </div>
                <div class="gl-no"></div>
                <div class="gl-dd">
                    <div class="column-item cell">
                        <div class="product-link">
                            <a data-ga-category="pc_nav" data-ga-action="click"
                               data-ga-label="LED大灯"
                               href="/product?title=LED大灯"
                               target="_self" class="ga-data title font-opensans">
                                LED大灯
                            </a>
                        </div>
                        <div class="product-link" style="line-height: 24px;">
                            <a data-ga-category="pc_nav" data-ga-action="click"
                               data-ga-label="应急启用电源"
                               href="/product?title=应急启用电源"
                               target="_self" class="ga-data title font-opensans">
                                应急启用电源
                            </a>
                        </div>
                        <div class="product-link" style="line-height: 24px;">
                            <a data-ga-category="pc_nav" data-ga-action="click"
                               data-ga-label="储能电源"
                               href="/product?title=储能电源"
                               target="_self" class="ga-data title font-opensans">
                                储能电源
                            </a>
                        </div>
                        <div class="product-link" style="line-height: 24px;">
                            <a data-ga-category="pc_nav" data-ga-action="click"
                               data-ga-label="气汞与应急电源一体机"
                               href="/product?title=气汞与应急电源一体机"
                               target="_self" class="ga-data title font-opensans">
                                气汞与应急电源一体机
                            </a>
                        </div>
                    </div>

                </div>
            </div>
            <div class="gl-dl">
                <div class="gl-dt">
                    <a target="_self" href="/home" >服务中心</a>
                </div>
                <div class="gl-no"></div>
                <div class="gl-dd">
                    <div class="column-item cell">
                        <div class="product-link">
                            <a data-ga-category="pc_nav" data-ga-action="click"
                               data-ga-label="门店查询"
                               href="/storeQuery"
                               target="_self" class="ga-data title font-opensans">
                                门店查询
                            </a>
                        </div>
                        <div class="product-link" style="line-height: 24px;">
                            <a data-ga-category="pc_nav" data-ga-action="click"
                               data-ga-label="售后服务"
                               href="/afterSales"
                               target="_self" class="ga-data title font-opensans">
                                售后服务
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gl-dl">
                <div class="gl-dt">
                    <a target="_self" href="/home" >新闻活动</a>
                </div>
                <div class="gl-no"></div>
                <div class="gl-dd">
                    <div class="column-item cell">
                        <div class="product-link">
                            <a data-ga-category="pc_nav" data-ga-action="click"
                               data-ga-label="企业资讯"
                               href="/newsActivities?title=企业资讯"
                               target="_self" class="ga-data title font-opensans">
                                企业资讯
                            </a>
                        </div>
                        <div class="product-link">
                            <a data-ga-category="pc_nav" data-ga-action="click"
                               data-ga-label="展会活动"
                               href="/newsActivities?title=展会活动"
                               target="_self" class="ga-data title font-opensans">
                                展会活动
                            </a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="gl-dl">
            <div class="gl-dt">
                <a target="_self" href="/search" class="iconfont icon-sousuo icon-data" style="font-size: 20px;"></a>
            </div>
            <div class="gl-no"></div>
        </div>
    </div>

</div>

<script src="/guanglianstatic/base/base.js"></script>
<script type="application/javascript">
    $('.gl-dl').mouseover(function () {
        console.log(11111)
        $(this).find('.gl-dd').css('display', 'block');
        $(this).find('.gl-no').css('display', 'block');
    });
    //设置鼠标离开节点mouseout
    $('.gl-dl').mouseout(function () {
        console.log(222)
        $(this).find('.gl-dd').css('display', 'none');
        $(this).find('.gl-no').css('display', 'none');
    })
</script>
</body>
</html>